<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康-后台管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/oksub.css">

    <style>
        .word {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #aaa;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form ok-form">
        <div class="layui-form-item">
            <label class="layui-form-label">单位名称</label>
            <div class="layui-input-block">
                <input type="text" name="unitName" placeholder="请输入单位名称" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">负责人</label>
            <div class="layui-input-block">
                <input type="text" name="principal" placeholder="请输入姓名" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="telephone" placeholder="请输入手机号码" autocomplete="off" class="layui-input"
                       lay-verify="required|phone">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
                       lay-verify="required|email">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <select name="province" lay-verify="required" lay-filter="province">
                    <option value="">请选择 省/自治区/直辖市/特别行政区</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required" lay-filter="city" disabled="disabled">
                    <option value="">请选择 市级地址</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="county" lay-verify="required" lay-filter="county" disabled="disabled">
                    <option value="">请选择 县/区级地址</option>
                </select>
            </div>
            <input type="hidden" name="cityId" value="">
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" name="address" placeholder="具体地址" autocomplete="off" class="layui-input"
                       lay-verify="required" maxlength="64">
            </div>
        </div>

        <!--<div class="layui-form-item">
            <label class="layui-form-label">照片</label>
            <div class="layui-input-block">
                <input type="file" name="picture" placeholder="请上传图片" autocomplete="off" class="layui-input">
            </div>
        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">官网链接</label>
            <div class="layui-input-block">
                <input type="text" name="officalWeb" placeholder="请上传官网链接" autocomplete="off" class="layui-input"
                       lay-verify="url">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单位类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-filter="type">
                    <option value="">请选择</option>
                    <option value="体检机构">体检机构</option>
                    <option value="医院">医院</option>
                </select>
            </div>
            <label class="layui-form-label">单位等级</label>
            <label class="layui-input-inline">
                <select name="grade" lay-verify="required" lay-filter="grade" disabled="disabled">
                    <option value="">请选择</option>
                </select>
            </label>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">单位介绍</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea" style="position: relative"
                          maxlength="500"
                          onpropertychange="if(value.length>500) value=value.substr(0,500)"
                          oninput="wordLeg(this);"></textarea>
                <div class="word">
                    <span class="text_count">0</span> / <span class="num_count" id="numCount">500</span>
                </div>
                <div style="margin-top: 20px"></div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    </form>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script>
    layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $ = layui.jquery;

        //提交表单
        form.on("submit(add)", function (data) {
            okUtils.ajax("/receiveUnitRegiste", "post", data.field, true)
                .done(function (response) {
                    console.log(response);
                    okLayer.greenTickMsg("添加成功", function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                })
                .fail(function (error) {
                    console.log(error)
                });
            return false;
        });

        //监听‘单位介绍’textarea中的字符数量
        window.wordLeg = function (obj) {
            var currleg = $(obj).val().length;
            var length = $(obj).attr('maxlength');
            if (currleg >= length) {
                layer.msg('字数请在' + length + '字以内');
            } else {
                $('.text_count').text(currleg);
            }
        }

        //‘体检单位’’类型和等级的联动
        form.on('select(type)', function (data) {
            if (data.value == "体检机构") {
                $("select[name=grade]").removeAttr("disabled");
                $("select[name=grade]").html("");
                $("select[name=grade]").append("<option value=''>请选择</option>").append("<option value='一级'>一级</option>").append("<option value='二级'>二级</option>").append("<option value='三级'>三级</option>");
                form.render('select');
            } else if (data.value == "医院") {
                $("select[name=grade]").removeAttr("disabled");
                $("select[name=grade]").html("");
                $("select[name=grade]").append("<option value=''>请选择</option>")
                    .append("<option value='一级甲等'>一级甲等</option>").append("<option value='一级乙等'>一级乙等</option>").append("<option value='一级丙等'>一级丙等</option>")
                    .append("<option value='二级甲等'>二级甲等</option>").append("<option value='二级乙等'>二级乙等</option>").append("<option value='二级丙等'>二级丙等</option>")
                    .append("<option value='三级甲等'>三级甲等</option>").append("<option value='三级乙等'>三级乙等</option>").append("<option value='三级丙等'>三级丙等</option>");
                form.render('select');
            } else {
                $("select[name=grade]").attr("disabled", "disabled");
                form.render('select');
            }
        });


        //地址的省市县三级联动
        //step1:获取省级列表
        var getProvinceList = function () {
            $.ajax({
                url: "/getAllProvince",
                type: "get",
                dataType: "json",
                async: true,
                success: function (responseData) {
                    console.log(responseData);
                    //添加省级下拉项
                    for (var i = 0; i < responseData.length; i++) {
                        $("select[name=province]").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                    }
                    form.render("select");
                },
                error: function () {
                    console.log("provinceList error");
                }
            });
        };
        $(document).ready(getProvinceList());
        //step2:生成市级下拉列表
        form.on("select(province)", function (data) {
            if (data.value != "") {
                $.ajax({
                    url: "/getAllCityByProvinceId?provinceId=" + data.value,
                    type: "get",
                    dataType: "json",
                    async: true,
                    success: function (responseData) {
                        console.log(responseData);
                        //生成并渲染市级下拉项
                        $("select[name=city]").removeAttr("disabled").html("").append("<option value=''>请选择 市级地址</option>");
                        for (var i = 0; i < responseData.length; i++) {
                            $("select[name=city]").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                        }
                        if ($("select[name=city]").val() == "") {
                            $("select[name=county]").html("").append("<option value=''>请选择 县/区级地址</option>").attr("disabled", "disabled");
                        }
                        form.render("select");
                    },
                    error: function () {
                        console.log("cityList error");
                    }
                });
            } else {
                $("select[name=city]").attr("disabled", "disabled");
                form.render('select');
            }
        });
        //step3:生成县区级下拉列表
        form.on("select(city)", function (data) {
            if (data.value != "") {
                $.ajax({
                    url: "/getAllCountyByCityId?cityId=" + data.value,
                    dataType: "json",
                    async: true,
                    type: "get",
                    success: function (responseData) {
                        console.log("countyList：" + responseData);
                        //生成并渲染县/区级下拉项
                        $("select[name=county]").removeAttr("disabled").html("").append("<option value=''>请选择 县/区级地址</option>");
                        for (var i = 0; i < responseData.length; i++) {
                            $("select[name=county]").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                        }
                        form.render("select");
                    },
                    error: function () {
                        console.log("countyList error");
                    }
                });
            } else {
                $("select[name=county]").attr("disabled", "disabled");
                form.render('select');
            }
        });

        //给隐藏域cityId赋值
        form.on("select(county)", function (data) {
            $("input[name=cityId]").val(data.value);
        });


    });
</script>
</body>
</html>